<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('区域管理')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    .bootstrap-tree-table .treetable-tbody td {
        white-space: normal !important;
    }

    .select-table {
        overflow: scroll;
        height: 89% !important;
        padding: 10px !important;

    }

    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .treetable-expander {
        width: auto !important;
        height: auto !important;
    }

    .bootstrap-tree-table .treetable-bars .tool-right {
        float: left !important;
        left: 10px;
    }

    .table-striped .table > thead:first-child > tr:first-child > th {
        font-weight: normal;
        font-size: 13px;
        border: 1px solid #cccccc !important;
    }

    .bootstrap-tree-table .treetable-tbody td {
        border: 1px solid #cccccc !important;
        border-top: 0px solid #cccccc !important;
    }

    .select-list li p {
        width: 20px !important;
    }

</style>
<body class="gray-bg">

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" id="back"
                   onclick="closeItem()">
                    <i class="fa fa-back"></i> 返回上一级
                </a>
                <a class="btn btn-success" id="add"
                   onclick="$.operate.add()">
                    <i class="fa fa-plus"></i> 新增
                </a>
                    <a class="btn btn-warning" onclick="$.table.exportExcel()">
                    <i class="fa fa-download"></i> 导出
                </a>

            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">

    /* 获取服务端返回变量 */
    var excellenceId = [[${excellenceId}]];

    /* 服务端模块url */
    var prefix = ctx + "excellenceMonitor";

    /* 初始化方法 */
    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 300});

        queryConcreteDetailList();
    });

    /* 获取列表 */
    function queryConcreteDetailList(){
        var options = {
            url: prefix + "/selectExcellenceList?excellenceId="+excellenceId,
            createUrl: prefix + "/detailAdd/"+excellenceId,
            updateUrl: prefix + "/detailEditView/"+excellenceId,
            removeUrl: prefix + "/removeDetail",
            exportUrl: prefix + "/exportDetail",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            modalName: "动态详情",
            columns: [
                {
                    checkbox: true,
                    valign: "middle",
                    align: 'center'
                },
                {
                    title: "序号",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    },
                    width:"5%",
                },
                {
                    field: 'describe',
                    align: 'center',
                    title: '描述'
                },
                {
                    field: 'path',
                    align: 'center',
                    title: '附件',
                    formatter: function(value, row, index) {
                        return '<a href="javascript:void(0)" onclick="downloadFile(\'' + row.fileName + '\')">附件地址</a>';
                    }
                },
                {
                    field: 'monthTime',
                    align: 'center',
                    title: '月份'
                },
                {
                    title: '操作',
                    align: 'center',
                    width:"20%",
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.detailId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.detailId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                }
                ]
        };
        $.table.init(options);
    }

    /* 下载附件 */
    function downloadFile(value){
        window.location.href = "/common/download/resource?resource=" + value;
    }


</script>
</body>
</html>